<template>
	<view class="v-home-page">
		<view class=" margin-top_30rpx ">
			<sunui-navbar v-if="tabList" :items="tabList" lineHeight="60rpx" :isCenter="true" :currentIndex="navIndex"
				padding="1rpx" :size="130" activeLineBg="#4972FE" textAlign="center" activeColor="#333333"
				activeLineWidth="45%" activeDirection="center" activeLineHeight="8rpx" :margin="0"
				@change="getChange"></sunui-navbar>
		</view>

		<view style="margin-top: 38rpx;">
			<mescroll-body ref="mescrollRef" :height="windowHeight + 'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item, index) in list" :key="index">
					<view class="list-public flex-between margin-top_30rpx"
						:class="index==tabIndex?'list-public-border':'list-public'" @click.stop="tabMusic(index,item)">
						<view class="flex-align-center">
							<block>
								<view class="display-a-jc r-play" v-if="isPlay==1 && previewIndex == index" @click.stop="getVideoSendTts(index, item)">

									<image class="img-94" :src="group3199" mode=""></image>
								</view>
								<view class="display-a-jc r-play" v-else @click.stop="getVideoSendTts(index, item)">

									<image class="img-94" :src="group3198" mode=""></image>
								</view>
							</block>
							<!-- 	<block v-else>
								<view class="flex r-play">
									<image class="img-97" :src="tirmbreLoading"></image>
								</view>
							</block> -->
							<view class="flex-columns">
								<view class="r-name font-overflow">{{ item.title }}</view>
								<!-- <view class="r-date">{{item.second}}|{{ item.createTime }}</view> -->
								<view class="r-date"> 时长：{{ item.duration }}秒</view>
							</view>
						</view>
						<!-- 	<view class="flex-align-center try-listening-cls" >
							<iamge></iamge>
							
						</view> -->
						<view class="flex-align-center "
							:class="index==tabIndex?'try-listening-clsed':'try-listening-cls'">
							<iamge></iamge>
							<view v-if="index==tabIndex" style="color: #333333;">已选择</view>

							<view v-else style="color: #fff;">选择</view>
						</view>
					</view>
				</block>
				<!-- <view class="bottom-positions flex">
					<view class="c-but2 flex" @click="videoConfirm()">
						<image mode="widthFix" :src="group3185"></image>
						选择并返回
					</view>
				</view> -->
				<view class="height90"></view>
				<view class="bottom-position  ">
					<view class="flex " style="padding: 30rpx 0;">
						<text class="">
							音量
						</text>
						<uv-slider v-model="value" min="0" max="10"></uv-slider>
					</view>


					<view class="c-but2 flex" @click="videoConfirm()">
						<image mode="widthFix" :src="group3185"></image>
						选择并返回
					</view>

				</view>


			</mescroll-body>
		</view>



	</view>
</template>

<script>
	const innerAudioContext2 = uni.createInnerAudioContext();
	import {
		mc
	} from '@/utils/mc_list'; //注意修改
	export default {
		data() {
			return {
				group3199: this.$imgs.group3199,
				group3198: this.$imgs.group3198,
				group3185: this.$imgs.group3185,
				value: 2,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				tabIndex: null,
				navIndex: 0,

				tabList: [],
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},

				list: [],

				windowHeight: '',

				// list: [{
				// 	sendId: 2,
				// 	timbreName: '青少年',
				// 	createTime: '2025.11.20',
				// 	second: 15
				// }, {
				// 	sendId: 2,
				// 	timbreName: '青少年',
				// 	createTime: '2025.11.20',
				// 	second: 15
				// }],
				micId: '',
				mcList: [],
				isPlay: 2,
				previewIndex: 0,
				musicObj: ''


			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			// 获取背景音乐分类
			this.musicCollectFn()


		},
		onHide() {
			console.log('yem1')
			innerAudioContext2.pause();
			this.isPlay = 2;
		},
		onUnload(){
			console.log('yem1')
			innerAudioContext2.pause();
			this.isPlay = 2;
		},
		onShow() {


			// 		this.$nextTick(() => {
			// 			this.mescroll.resetUpScroll();
			// 		});

		},
		computed: {


		},
		methods: {
			getVideoSendTts(index,item){
				
				console.log(item.play_url?.uri)
				innerAudioContext2.src = item.play_url?.uri
				
				
				if(this.isPlay == 1){
					this.isPlay = 2;
					innerAudioContext2.pause();
					innerAudioContext2.onPause(() => {
						console.log('暂停播放');
					});
					
					if(this.isPlay == 2&&this.previewIndex!=index){
						this.isPlay = 1;
						innerAudioContext2.play();
					}
					
				}else if(this.isPlay == 2){
					this.isPlay = 1;
					innerAudioContext2.play();
					innerAudioContext2.onCanplay(() => {
						console.log('开始播放');
					});
					innerAudioContext2.onEnded(() => {
						this.isPlay = 2;
									
						innerAudioContext2.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');
					});
					innerAudioContext2.onError(err => {
						innerAudioContext2.destroy();
						console.log('播放音频出错：', err);
					});
									
				}
				this.previewIndex=index
				
				
			},
			videoConfirm() {
				console.log(this.musicObj)
				if (this.musicObj) {
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm.musicFuns(JSON.stringify({
						musicObj: this.musicObj,
						bgm_volume: (this.value) / 10


					})); //重点$vm
					uni.navigateBack();
				} else {
					this.$sun.toast('请选择背景音乐', 'none')
				}
			},


			async upCallback(scroll) {

				// uni.showLoading({
				// 	title: '加载中...',
				// 	mask: true
				// });

				// if (this.mcList.length > 0) {
				// 	info = await this.$http.get({
				// 		url: this.$api.musicList,
				// 		data: {
				// 			mcid: this.mcList[0]['id_str'],
				// 			// username: uni.getStorageSync('staffCode')
				// 		}
				// 	});
				// 	console.log(info,'==========音乐列表')
				// } else {

				// 	this.$sun.toast('分类音乐加载失败', 'none')
				// }



				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				const result = await this.$http.post({
					url: this.$api.musicList,
					data: {
						mcid: this.mcid,

						page: 1,
						limit: 20
					}
				});
				if (result.errno == 0) {
					// uni.hideLoading()
					uni.hideLoading()
					this.mescroll.endByPage(result.data.music_list.length, 1);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.music_list);
					console.log(this.list)
				} else {
					// uni.hideLoading()
					uni.hideLoading()
				}
			},

			async musicCollectFn() {


				console.log(mc)
				const result = await this.$http.get({
					url: this.$api.musicCollect,

				});
				console.log('分类res=======', result, result.data);
				let res = result.data;
				res['mc_list'] ?
					mc.find(item => {
						let mcItem;
						(mcItem = res['mc_list'].find(m => {
							return item === m.name;
						})) ?
						this.mcList.push(mcItem): void 0;
					}) :
					console.log('加载分类失败11');
				this.mcList = this.mcList.map((item) => {
					return {
						aweme_cover: item.aweme_cover,
						cover: item.cover,
						id: item.cover,
						id_str: item.id_str,
						is_hot: item.is_hot,
						level: item.level,
						name: item.name,
						value: item.name,
						text: item.name

					}
				})

				let info;
				console.log('测试热榜音乐this.mcList====', this.mcList, '音乐分类');


				this.tabList = this.mcList.map((item, index) => {
					return {
						id: item.id_str,
						name: item.name
					}
				})
				this.mcid = this.mcList[0]['id_str']

				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});








			},


			getChange(index) {
				this.navIndex = index;
				this.mcid = this.mcList[index]['id_str']

				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
				innerAudioContext2.pause();
				this.isPlay = 2;


			},
			tabMusic(index, item) {
				this.musicObj = item
				console.log(index)
				this.tabIndex = index
				
				
				
				

			}

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 5rpx 0;
		position: relative;

		.bottom-position {
			z-index: 999;
			position: fixed;
			bottom: 0;
			height: 262rpx;
			width: 100%;
			left: 0%;
			background-color: #f7f7f7;

			.c-but2 {
				image {
					width: 31.6rpx;
					margin-right: 10rpx;

				}

				height: 100rpx;
				width: 90%;
				padding: 30rpx 0;
				border-radius: 10rpx;
				background: linear-gradient(97.41deg, #436ffe 1.914%, #828df9 98.593%);
				margin: 0 32rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
			}

			::v-deep .uv-slider {
				width: 86%;
			}


		}

		.bottom-positions {
			z-index: 999;
			position: fixed;
			bottom: 200rpx;
			height: 83rpx;
			width: 100%;
			left: 0%;

			.c-but2 {
				image {
					width: 31.6rpx;
					margin-right: 10rpx;

				}

				height: 100rpx;
				width: 90%;
				padding: 30rpx 0;
				border-radius: 10rpx;
				background: linear-gradient(97.41deg, #436ffe 1.914%, #828df9 98.593%);
				margin: 0 32rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
			}

		}


		.img-97 {
			width: 70%;
			height: 70%;
			animation: rotate 1.5s linear infinite; //图片旋转
		}

		.try-listening-cls {
			color: rgb(255, 255, 255);
			font-size: 32rpx;
			border-radius: 180rpx;
			background: linear-gradient(97.41deg, rgb(67, 111, 254) 1.914%, rgb(130, 141, 249) 98.593%);
			padding: 8rpx 22rpx;
		}

		.try-listening-clsed {
			color: #333333;
			font-size: 32rpx;
			border-radius: 180rpx;
			background: rgb(239, 239, 239);
			padding: 12rpx 22rpx;
		}


		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.list-public-border {
			box-sizing: border-box;
			border: 2rpx solid rgb(123, 109, 255);
			background-color: #FAFAFA;
			padding: 30rpx 20rpx;
			position: relative;
			left: 0%;
			border-radius: 20rpx;


		}

		.list-public {

			background-color: #FAFAFA;
			padding: 30rpx 20rpx;
			position: relative;
			left: 0%;
			border-radius: 20rpx;


		}

		.r-play {
			margin-right: 30rpx;
			// width: 72rpx;
			// height: 72rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
		}

		.img-94 {
			width: 103.06rpx;
			height: 103.06rpx;
		}

		.r-date {
			margin-top: 20rpx;
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		.r-name {
			color: rgb(51, 51, 51);
			ffont-size: 32rpx;
			font-weight: 600;
			max-width: 400rpx;
		}

		.height90 {
			height: 155rpx;
		}
	}
</style>